<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>取消请求</title>
</head>
<body>
<button class="send">发送请求</button>
<button class="none">取消请求</button>
<script>
    /**
     * 请求过程中,结果还没有返回来之前,我们可以是用代码将请求手动取消
     */
    const send=document.querySelector('.send')
    const none=document.querySelector('.none')
    let xhr=null
    send.addEventListener('click',function () {
        xhr = new XMLHttpRequest()
        xhr.open('GET','http://localhost:8000/timeout')
        xhr.send()
        xhr.onreadystatechange=function () {
            if (xhr.readyState===4){
                if (xhr.status>=200&&xhr.status<300){
                    document.querySelector('div').innerHTML=`${xhr.response}`
                }
            }

        }
    })
    
    //取消请求
    none.addEventListener('click',function () {
        //使用abort取消请求
        xhr.abort()
    })
</script>
</body>
</html>